<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="Neon Admin Panel">
	<meta name="author" content="">
	
	<title>晓辰-日志与笔记</title>
	

	<link rel="stylesheet" th:href="@{/css/jquery-ui-1.10.3.custom.min.css}">
	<link rel="stylesheet" th:href="@{/css/entypo.css}">
	<link rel="stylesheet" th:href="@{/css/css.css}">
	<link rel="stylesheet" th:href="@{/css/bootstrap.css}">
	<link rel="stylesheet" th:href="@{/css/neon-core.css}">
	<link rel="stylesheet" th:href="@{/css/neon-theme.css}">
	<link rel="stylesheet" th:href="@{/css/neon-forms.css}">
	<link rel="stylesheet" th:href="@{/css/custom.css}">

	<script th:src="@{/js/jquery-1.11.0.min.js}"></script>

	<!--[if lt IE 9]><script src="assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
		<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->

	<style type="text/css">
		body{
			margin: 0px auto;
			width:1550px;
			min-width:1024px;
			max-width:100%;
			height:100%;
			background-color:white;
		}
	</style>
</head>
<body class="page-body  page-fade" data-url="http://neon.dev">

<div class="page-container"><!-- add class "sidebar-collapsed" to close sidebar by default, "chat-visible" to make chat appear always -->

	<!--调用可复用代码：侧边栏-->
	<div th:insert="~{commons/common::sidebar(active='notes.html')}"></div>
	<div class="main-content">
		<!--调用可复用代码：头部栏-->
		<div th:insert="~{commons/common::topbar}"></div>

		<hr>

<!--		数据库表:
			CREATE TABLE pages (
				id INT PRIMARY KEY NOT NULL AUTO_INCREMENT,
				title VARCHAR(255),
				content TEXT,
				source VARCHAR(255)
			);

-->
		<div class="notes-env">

			<div class="notes-header">
				<h2>个人笔记</h2>

				<div class="right" >
					<a class="btn btn-primary btn-icon icon-left" id="add-note1">
						<i class="entypo-pencil"></i>
						添加新日志
					</a>
				</div>

				<div   class="right" id="saveButton" >
					<a class="btn btn-primary">
<!--						<i class="entypo-pencil"></i>-->
						<i class="fa fa-save"></i>
							点击保存
					</a>
				</div>
			</div>

			<div class="notes-list">

				<ul class="list-of-notes">
					<!-- predefined notes -->
					<li class="current"> <!-- class "current" will set as current note on Write Pad -->
						<a href="#">
							<strong>日记标题</strong>
							<span>小标题</span>
						</a>

						<button class="note-close">&times;</button>

						<div class="content">内容信息</div>
					</li>
<!--					<li class="current"> &lt;!&ndash; class "current" will set as current note on Write Pad &ndash;&gt;-->
<!--						<a href="#">-->
<!--							<strong>简单信息记录</strong>-->
<!--							<span>个人日常信息</span>-->
<!--						</a>-->

<!--						<button class="note-close">&times;</button>-->

<!--						<div class="content">2022/4/10 早晨：9：00 登录系统进行监测</div>-->
<!--					</li>-->

<!--					<li>-->
<!--						<a href="#">-->
<!--							<strong>最近完成信息</strong>-->
<!--							<span>记录</span>-->
<!--						</a>-->

<!--						<button class="note-close">&times;</button>-->

<!--						<div class="content">2022/4/10 新增一家企业进行排污行为监测</div>-->
<!--					</li>-->

<!--					<li>-->
<!--						<a href="#">-->
<!--							<strong>企业排污行为记载</strong>-->
<!--							<span>管理员记载</span>-->
<!--						</a>-->

<!--						<button class="note-close">&times;</button>-->

<!--						<div class="content">2023/4/10 企业一发现数据不稳定行为</div>-->
<!--					</li>-->


<!--					<li>-->
<!--						<a href="#">-->
<!--							<strong>心情日志</strong>-->
<!--							<span>记录每一天</span>-->
<!--						</a>-->

<!--						<button class="note-close">&times;</button>-->

<!--						<div class="content">岁月无常是过客，得失成败都是得，聚散悲和是浮云，悲欢之间是苦乐，情爱之间是取暖，真诚之间是无言。人生天地间，忽如远行客，在生命的起点一路跋涉，爱与恨，得与失，尝尽风尘里的悲欢离合。往往走的最急的是最美的风景，伤的最深的是最真的感情。命运的精彩不在轰轰烈烈，经历时的味，伤心时的泪，开心时的醉，都是因珍惜而拥有，因收获而懂得，因追求而可贵，因爱过而无悔。风雨的洗礼或艰辛，或苦涩，因为用心了只有懂得，只有值得;悲欢离合或无奈，或不舍，因为经历了只有执着，只有收获。尘世之美，需要我们用心灵去扑捉。永怀感恩之心收藏点滴快乐。远离的，不是脚步而是时间;飘洒的，不是心情而是唯美。沉淀喜悦才是真谛，拥抱幸福才是永恒。惟有感怀，无悔人生。</div>-->
<!--					</li>-->

					<!-- this will be automatically hidden when there are notes in the list -->
					<li class="no-notes">
						There are no notes yet!
					</li>
<!--					前端增加数据-->
<!--					<div id="content" contenteditable="true">此处为默认文本</div>-->
				</ul>


				<div class="write-pad">
					<textarea class="form-control autogrow"></textarea>
				</div>


			</div>
		</div>

		<script type="text/javascript">
		//删除一行数据
		function deleteNote(deleteButtonId) {
			const liElement = document.querySelector(`#${deleteButtonId}`).closest('li');
			const title = liElement.querySelector('strong').textContent;

			$.ajax({
				url: 'http://localhost:8086/sewage/deleteNote',
				type: 'POST',
				data: {title: title},
				success: function(result) {
					// 删除成功后的回调函数
				},
				error: function(xhr, textStatus, errorThrown) {
					// 处理错误信息
				}
			});
		}



		//查询出数据
			$.getJSON("http://localhost:8086/sewage/getNote", function(data) {
				// 获取笔记列表UL元素
				var listOfNotes = document.querySelector(".list-of-notes");
				var maplist = data.data;
				maplist.forEach(function(note) {
					$("#total_count3").html(note['subhead'])
					// 创建新笔记
					var newNote = document.createElement("li");

					// 生成唯一ID
					var deleteButtonId = 'deleteNoteBtn_' + Math.random().toString(36).substr(2, 9);

					newNote.innerHTML = `
						<a href="#">
							<strong>${note.title}</strong>
							<span>${note.subhead}</span>
						</a>
						<button id="${deleteButtonId}" class="note-close"  onclick="deleteNote('${deleteButtonId}')">&times;</button>
						<div class="content">${note.content}</div>
					`;
					// 将新笔记添加到列表中
					listOfNotes.appendChild(newNote);
				});
			});

    	//保存数据
			// 	// 获取要操作的DOM元素
			var addNoteButton = document.getElementById("add-note1");
			var listOfNotes = document.querySelector(".list-of-notes");

			// 将添加笔记的按钮增加监听器
			addNoteButton.addEventListener("click", function() {
				// 创建新笔记
				var newNote = document.createElement("li");
				newNote.innerHTML = `
		  <a href="#">
			<strong contenteditable="true" style="opacity: 60%;">请编辑标题</strong>
			<span contenteditable="true" style="opacity: 60%;">请编辑描述</span>
		  </a>
		  <button class="note-close"  onclick="deleteNote()">&times;</button>
		  <div class="content" contenteditable="true" style="opacity: 60%;">请编辑内容</div>
		`;

				//插入
				// 获取 strong、span 和 div.content 元素，并将其值赋给对应的变量 title、subtitle、content
				// var title = newNote.querySelector('strong').textContent;
				// var subtitle = newNote.querySelector('span').textContent;
				// var content = newNote.querySelector('.content').textContent;

				// 获取 strong、span 和 div.content 元素，并将其值赋给对应的变量 title、subtitle、content
				var noteTitle = newNote.querySelector('strong');
				var noteSubtitle = newNote.querySelector('span');
				var noteContent = newNote.querySelector('.content');

				var saveButton = document.querySelector('#saveButton');
				saveButton.addEventListener('click', function(event) {
					// 获取可编辑元素中的文本
					var title = noteTitle.textContent;
					var subtitle = noteSubtitle.textContent;
					var content = noteContent.textContent;
					$.post('http://localhost:8086/sewage/saveNote', {title: title, subhead: subtitle, content: content}, function(data) {
						// 显示响应消息
						if (data.message === "success"){
							alert("成功保存");
							location.reload();
						}
					});
				});

				//插入到列表
				listOfNotes.appendChild(newNote);
			});


		</script>


		<!-- Footer -->
		<footer class="main">
			晓辰学技术
		</footer>
	</div>
	<!--		聊天框-->
	<div th:insert="~{commons/common::rightbar}"></div>

</div>
	<!-- Bottom Scripts -->
	<script th:src="@{/js/main-gsap.js}"></script>
	<script th:src="@{/js/jquery-ui-1.10.3.minimal.min.js}"></script>
	<script th:src="@{/js/bootstrap.js}"></script>
	<script th:src="@{/js/joinable.js}"></script>
	<script th:src="@{/js/resizeable.js}"></script>
	<script th:src="@{/js/neon-api.js}"></script>
	<script th:src="@{/js/neon-notes.js}"></script>
	<script th:src="@{/js/neon-chat.js}"></script>
	<script th:src="@{/js/neon-custom.js}"></script>
	<script th:src="@{/js/neon-demo.js}"></script>

</body>
</html>

